import { LeftOutline } from "antd-mobile-icons";
import { Button, DatePicker, Input,Modal } from "antd-mobile";
import Icon from "@/components/icons";
import { useMemo, useState } from "react";
import "./index.css";
import billListData from "@/contant/billListData"
import billListDataChinese from "@/contant/billListDataChinese"
import classNames from "classnames";
import axios from "axios";


export default function Addledger() {
  const [visible, setVisible] = useState(false);
  let now = new Date();

  // 用于保存选择的时间
  const [checkDate, setCheckDate] = useState(now);

  //用于保存用于选择金额分类是支出还是收入
  const [moneyType,setMoneyType]=useState("pay");   



  
  // 处理时间格式:"2022-02-23"
  let dateStr = (time) => {
    let str = time.getFullYear() + "-";
    if (time.getMonth() + 1 < 10) {
      str += "0" + (time.getMonth() + 1);
    } else {
      str += time.getMonth() + 1;
    }
    str += "-" + time.getDate();
    return str;
  };

  let nowStr = useMemo(() => {
    return dateStr(now);
  }, [now]);
  let checkDateStr = useMemo(() => {
    return dateStr(checkDate);
  }, [checkDate]);

  // 用于保存输入框中的值
  let [inputValue, setinputValue] = useState("");

//   用于保存用户选择的金额类型
const [listType,setListType]=useState("");




  return (
    <div>
      <div className="box1">
        <div className="title">
          <LeftOutline />
          <p>记一笔</p>
        </div>
        {/* 按钮 */}
        <div className="btn-box">
          <button className={classNames("btn",moneyType==="pay"?"active":"")} onClick={()=>{
            setMoneyType("pay");
            }}>支出</button>
          <button className={classNames("btn",moneyType==="income"?"active":"")} onClick={()=>{
            setMoneyType("income");
        }}>收入</button>
        </div>
        {/* 输入框 */}
        <div className="box1-1">
          {/* 选择时间 */}
          <div
            className="check-time"
            onClick={() => {
              setVisible(true);
            }}
          >
            <Icon type="block" />
            {/* 选择时间 */}
            <DatePicker
              title="时间选择"
              visible={visible}
              onClose={() => {
                setVisible(false);
              }}
              max={now}
              onConfirm={(val) => {
                setCheckDate(val);
              }}
            />
            <span>{checkDateStr === nowStr ? "今天" : checkDateStr}</span> 
          </div>

          {/* 输入框 */}
          <div className="input-box">
            <Input
              placeholder="0.00"
              type="number"
              value={inputValue}
              onChange={(val) => {
                setinputValue(val);
              }}
            />
            <span>￥</span>
          </div>
        </div>
      </div>
      {/* 金额类型列表区域 */}
      <div className="box2">
        {Object.keys(billListData[moneyType]).map((item,index)=><div className="list-box" key={index}>
          <h3 className="list-title">{billListDataChinese[item]}</h3>
          <ul>
            {billListData[moneyType][item].map((item2,index2)=><li key={index2} id={item2} onClick={(event)=>{
                // 获取到当前点击的li元素的ID值
                // console.log(event);
                if(event.target.localName==="li"){
                    // console.log(event.target.id);
                    setListType(event.target.id);

                    // 所有的li元素删除类名
                    let li=document.getElementsByTagName("li");
                    for(let i=0;i<li.length;i++){
                        li[i].classList.remove("list-active");
                    }
                    // 修改当前点击的li元素的样式
                    event.target.classList.add("list-active");



                }
            }}>
              <Icon type={""} />
              <p>{billListDataChinese[item2]}</p>
            </li>)}
          </ul>
        </div>)}
        
      </div>

      {/* 保存按钮 */}
      <button className="save" onClick={()=>{
        // 处理时间格式："2022-10-24 10:36:42"
        console.log(checkDate);
        let dateStr=checkDateStr+" "+checkDate.getHours()+":"+checkDate.getMinutes()+":"+checkDate.getSeconds();
        // 处理金额
        if(inputValue==="" || inputValue*1===0){
            Modal.alert({
                content: '请输入金额！',
                onConfirm: () => {
                    setinputValue("");
                },
            })
            
            return
        }else{
            if(moneyType==="pay" && inputValue*1>0){
                setinputValue("-"+inputValue);
                inputValue="-"+inputValue;
            }else if(moneyType==="income" && inputValue*1<0){
                Modal.alert({
                    content: '收入的金额必须大于0！',
                    onConfirm: () => {
                        setinputValue("");
                    },
                })
            }
        }

        // 处理金额使用类型
        if(listType===""){
            Modal.alert({
                content: '请选择金额所属类型！',
                onConfirm: () => {

                },
            })
            return
        }


        let obj={
            "type":moneyType,
            "money":inputValue*1,
            "date":dateStr,
            "useFor":listType,
        }
        console.log(obj);
        // 调用接口，上传账单详情
        // axios.post({
        //     method:"post",
        //     url:"http://...",
        //     data:obj
        // }).then(res=>{
        //     // 处理返回数据

        //     // 清空输入框中的金额和金额所属类型
        //     setinputValue("");
        //     setListType("");
        // })


      }}>保存</button>
    </div>
  );
}
